<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist//vue.js"></script>

    <div id="app">
        {{fullname}}  {{fullname}}  {{fullname}}
    </div>
    <script>
        //1.计算属性
        //2.watch实现原理
        //3.数组响应式原理
        const vm = new Vue({
            el: "#app",
            data: {
                firstname:'朱',
                lastname:'古力'
            },
            //计算属性 依赖的值发生变化才会重新执行用户的方法
            //计算属性中要维护一个dirty属性，默认计算属性不会立即执行
            //计算属性就是一个defineProperty
            //计算属性也是一个watcher，默认渲染会创建一个渲染watcher
            //底层就是一个带有dirty属性的wathcer
            computed:{
                fullname(){ //defineProperty中的get方法
                    console.log('run');
                    return this.firstname + this.lastname
                }
                // fullname:{
                //     get(){
                //         console.log('run');
                //         return this.firstname + this.lastname
                //     },
                //     set(newValue){
                //         console.log(newValue);
                //     }
                // }
            }
        });
        setTimeout(()=>{
            vm.firstname = '123';//会执行什么? 执行计算属性watcher更新操作 dirty=true
        },1000)
    </script>

</body>

</html>